<template>
  <div v-bind:class="artist.category">
    <b-modal ref="myWarning1" hide-footer title="提示">
      <div class="d-block text-center">
        <h4>未找到相关乐队!</h4>
      </div>
    </b-modal>

    <div class="top2" v-if="artist"></div>
    <div class="artist-name" align="left">
      <h3 style="font-family: Segoe UI, Verdana; font-weight: bold;">
        &nbsp;&nbsp;
        <nobr>{{artist.name}}</nobr>
      </h3>
      <h3>
        &nbsp;&nbsp;
        <nobr>{{artist.name_chs}}</nobr>
      </h3>
    </div>

    <b-container v-if="artist">
      <router-view v-wechat-title="$route.meta.title" :artist_name_parent="artist_name"></router-view>
    </b-container>
  </div>
</template>

<script>
//import AlbumList from './artist/AlbumList.vue'

export default {
  //components: {
  //   AlbumList
  //},
  async asyncData(context) {
    let [request1Data, request2Data, request3Data] = await Promise.all([
      context.$axios.get('/api/artists-search/', { params: { artist: context.route.params.name, showLoading: false } }),
      context.$axios.get('/api/albums-num/', { params: { artist: context.route.params.name, showLoading: false } }),
      context.$axios.get('/api/images-num/', { params: { artist: context.route.params.name, showLoading: false } }),
    ]).catch(err => {
      console.log(err);
    });
    return {
      artist: request1Data.data[0],
      artist_name: request1Data.data[0].name,
      num_album: request2Data.data.num_album,
      num_studio: request2Data.data.num_studio,
	  num_live: request2Data.data.num_live,
      num_compilation: request2Data.data.num_compilation,
      num_video: request2Data.data.num_video,
      num_img: request3Data.data.num_img,
    };
  },
  data() {
    return {
      url: this.$route.params.name,
      //artist: '',
      //artist_name: '',
      //commentList: [],
      inputVal: '',
      fuzzy_list: [],
      //num_img: 0,
      //num_album: 0,
      //num_studio: 0,
      //num_compilation: 0,
      //num_video: 0,
    };
  },
  mounted: function() {
    //this.searchArtist();
    //this.numAlbums();
    //this.numImages();
    //this.listComments();
    this.$store.dispatch('hideloader');
    //if (this.commentList) {
    //  this.$emit('refreshComment', this.num_comments);
    //}
    this.$emit('showArtist', this.$route.params.name);
    this.$emit('numImages', this.num_img);
    this.$emit('numAlbums', { album: this.num_album, studio: this.num_studio, live: this.num_live, compilation: this.num_compilation, video: this.num_video });
	//this.$parent.show_tooltip1();
  },
  methods: {
    searchArtist() {
      this.$emit('showArtist', this.$route.params.name);
      this.$axios
        .get('/api/artists-search/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.artist = res[0];
          this.artist_name = res[0].name;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    searchArtist_input() {
      this.$axios
        .get('/api/artists-search/', { params: { artist: this.inputVal, showLoading: false } })
        .then(response => {
          var res = response.data;
          if (res.name == '') {
            this.$refs.myWarning1.show();
          } else {
            this.artist = res;
            this.$router.push({
              path: '/artist/' + this.artist.alias,
              query: {
                category: this.artist.category,
              },
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    focus: function() {
      if (document.querySelector('#search') == document.activeElement) {
        this.fuzzy_search(this.inputVal.trim());
      }
    },
    fuzzy_search: function(value) {
      var that = this;
      if (!value) {
        that.fuzzy_list = [];
        return;
      }
      //调取接口
      this.$axios
        .get('/api/artists-fuzzy/', { params: { artist: this.inputVal, showLoading: false } })
        .then(response => {
          var res = response.data;
          that.fuzzy_list = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    numImages() {
      this.$axios
        .get('/api/images-num/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.num_img = res.num_img;
          this.$emit('numImages', this.num_img);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    numAlbums() {
      this.$axios
        .get('/api/albums-num/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.num_album = res.num_album;
          this.num_studio = res.num_studio;
		  this.num_live = res.num_live;
          this.num_compilation = res.num_compilation;
          this.num_video = res.num_video;
          this.$emit('numAlbums', { album: this.num_album, studio: this.num_studio, live: this.num_live, compilation: this.num_compilation, video: this.num_video });
        })
        .catch(function(error) {
          console.log(error);
        });
    },
	show_tooltip1() {
	   this.$parent.show_tooltip1()	
	},
    hide_tooltip1() {
	   this.$parent.hide_tooltip1()	
	}
  },
  watch: {
    //'$route' (to, from){
    //   this.$router.go(0)
    //},
    $route(to, from) {
      //this.$router.go(0)
      this.searchArtist();
      this.numImages();
      this.numAlbums();
    },
    inputVal: function() {
      this.focus();
    },
    num_img: function() {
      this.$emit('numImages', this.num_img);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  text-shadow: 2px 2px 8px #00fa9a;
}
</style>

<!--<style src="../../assets/css/link.css"></style>-->
<!--<style src="../../assets/css/font.css"></style>-->
